<template>
    <div class="fillcontain">
        <div class="articleContainer">
            <el-form 
                :inline="true" 
                :model='articleData' 
                ref="articleData" 
                :rules="rules"
                class="demo-form-inline">
              <div class="form-content">
                 <el-row>
                    <el-col :span="24">

                         <div class="title-container" style="width:600px;">
                            <el-form-item  label="账号:" prop="title">
                                <el-input type="text" class="article-textarea" :rows="1" autosize placeholder="请输入账号" v-model="articleData.username">
                                </el-input>
                            </el-form-item>
                
                            <el-form-item  label="密码:" prop="abstracts">
                                <el-input type="text" class="article-textarea" :rows="1" autosize placeholder="请输入密码" v-model="articleData.password">
                                </el-input>
                            </el-form-item>
                        </div>

                        <div  style="width:200px;">
                            <el-button type="primary" class="publish"  @click='publishArticle("articleData","publish")'>添加</el-button>
                            <el-button type="primary" class="publish"  @click='re_set()'>重置</el-button>
                        </div>

              
                    </el-col>
                </el-row>

             </div>


            </el-form>
        </div>

    </div>
</template>

<script>
    import Tinymce from 'cps/Tinymce';
    import dtime from 'time-formater'
    import * as mutils from 'utils/mUtils'
    import {axios} from 'utils/'

    export default {
        components: { Tinymce },
        data(){
            return {
                content: 'Tinymce',
                articleData:{
                    username:'',
                    password:''
                },

                rules: {
                    username: [{ required: true,message: '手机号码为必填项~',trigger : 'blur' }]
                },
                //详情弹框信息
                dialog: {
                    width:'400px',
                    show : false,
                    title: '添加管理员',
                    formLabelWidth:'120px'
                }
              
            }
        },
      	mounted() {
          
	    },
        methods: {
            //发布文章
            publishArticle(articleData,type){
                this.$refs[articleData].validate((valid) => {
                    if (valid) {//表单数据验证完成之后，提交数据;
                        let formData = this[articleData];
                        let data = {};
                        for(var i in formData){
                            data.title = formData['title']
                            data.content = formData['content']
                        }
                        if(type == 'publish'){
                            data.status = '1';  // 发布
                        }else{
                            data.status = '2';  // 草稿
                        }
                        console.log(data);
                        this.addFundArtices(data)
                    }
                })
            },
            addFundArtices(data){
                 axios({
                    type:'get',
                    path:'/api/article/addFundArtices',
                    data:data,
                    fn:res=>{
                        console.log(res);

                    },
                    errFn:(err)=>{
                        this.$message.error('新增失败请重试,'+err)
                    }
                })
            },
            re_set(){
                this.articleData.username = '';
                this.articleData.password = '';
            }

        },
    }
</script>



<style lang="less" scoped>
    .publish-container{
        height: 50px;
        line-height: 50px;
        background-color: #38A884;
        border-color: #4db3ff;
        color: #fff;
        text-align: right;
        padding: 0 10px;
        margin-bottom:10px;
    }
    .title-container{
         margin-bottom:20px;
        .article-textarea{
            min-width:1000px;
        }
    }
    .condition-container{
        .item{
            float:left;
        }
    }
   .form-tinymce-container{
       margin-bottom:100px;
   }
     
</style>


